<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<script src="../js/jquery-1.9.1.min.js"></script>
		<style type="text/css">
			*{
				margin:0;padding:0;
			}
			#container{width:65vw;height:60vh;position: absolute;top:43vh;left:30vw;}
			@media screen and (max-width:2000px) {
				#container{
					width:65vw;
				}
			}
			@media screen and (max-width:1680px) {
				#container{
					position: absolute;
					top:40vh;
					left:30vw;
				}	
			}
			@media screen and (max-width:1600px) {
				#container{
					position: absolute;
					top:40vh;
					left:30vw;
				}
			}
			@media screen and (max-width:1440px) {
				width:50vw;
				position: absolute;
				top:40vh;
				left:30vw;	
			}
			@media screen and (max-width:1400px) {
				width:45vw;
				position: absolute;
				top:30vh;
				left:30vw;	
			}
			@media screen and (max-width:1366px) {
				width:40vw;
				position: absolute;
				top:30vh;
				left:20vw;			
			}
			@media screen and (max-width:1360px) {
						
			}
			
		</style>
	</head>
	<body>
		<div>
			<div id="container" style=""></div>
		</div>
		<div style="width:100vw;height:60vh;position: absolute;top:41vh;left:10vw">
			<div id="container" style=""></div>
		</div>
		<!-- <script type="text/javascript" src="../js/echarts.js">	</script> -->
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
		<script type="text/javascript">
		var dombar = document.getElementById("container");
		var myChart = echarts.init(dombar);
			option = {
			tooltip:{
				 show:false,
			},
		    grid: {//距离表的样式
		        left: '2%',
		        right: '5%',
		        bottom: '6%',
		        containLabel: true
		    },
		    xAxis:  {
		        type: 'value',
		        show: false,
		       
		    },
			legend:{
				 selectedMode:false,
			},
		    yAxis: {
		        type: 'category',
		        data: ['Regular customer','New customer'],//新顾客老顾客的命名
		        axisLine: { show: false},
		        axisTick: {show: false},
			 axisLabel : {
					formatter: '{value}',
					textStyle: {
						color: '#fff',
						fontSize: 10
					}
				}
		    },
		    series: [
		        {
		//             name: '',
		            type: 'bar',
					clickable:true,
		            barWidth: 10,
		            itemStyle: {
		                    normal: {
		                        barBorderRadius: 0,
								color:'#393d58',
		                    },
		                },
		              stack: '1',
		            barGap:'-100%',//两个框的重合距离的/
		//           data: [999,999],//进度条的总长度
					  data:[],
		             // barGap:'20%'
		        },
		        {
		            type: 'bar',
			lengend:{
			  selectedMode:true,
			},
			 barWidth: 10,//进度条的宽度
			     itemStyle: {
			       normal: {
	                  barBorderRadius: 0,
	                     color: function (params){//控制进度条显示不同的颜色
							var colorList = ['#008efe','#df6c33'];
							return colorList[params.dataIndex];
						},
	//                         areaStyle: {type: 'default'},
	                 label : {
	                    show: true, 
	//                     position: 'right',
							position: 'top',
	                    formatter: function (params) {
	//                       // console.log(params)//这里输出params所有参数 需要什么下面自己拼
	//                         // return params.name + params.data;
	                      return params.data+"station";
	                    }, 
	                    textStyle: {//文本的字体大小和颜色
	                        color: '#fff',
							fontSize: 8
	                    }
	                },
	                    },
	                },
	//             data: [273,87],
					data:[],	
			        },
			    ]
			};
			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}	
		$(function () {
            //初始化数据
            initData();
            setInterval(initData, 10000);
        });
        var dombar = document.getElementById("container");
        var gb = {
            chart: echarts.init(dombar)
        };
        function disposeAndRun() {
            if (gb.chart) {
                gb.chart.dispose();
            }
            gb.chart = null;
            run(true);
        }
        var run = function (df) {
            if (!gb.chart) {
                gb.chart = echarts.init(dombar);
            }
            if (option && typeof option === 'object') {
                gb.chart.setOption(option, true);
            }
        }
function initData() {
       $.ajax({
                url :"http://192.168.1.27:8080/MetisManage/dataAuth/findMemberOldAndNew",
                success: function (rrdata) {
                    var data = rrdata.records[0];
					// console.log(data,'wwww')
					var seriesdata=[]
					var seriesdata1=[]
					seriesdata.push(data.allMember)
					seriesdata.push(data.allMember)
					seriesdata1.push(data.oldMember)
					seriesdata1.push(data.newMember)
					option.series[0].data=seriesdata,
					option.series[1].data=seriesdata1
                    disposeAndRun();
                }
            });
			      }	
		</script>
	</body>
</html>
